<template>
    <div class="category-dialog">
        <el-dialog :title="title" :visible="dialogFormVisible" :show-close="false" width="35%" :modal-append-to-body="false" >
            <el-form :model="form">

                <el-form-item label="名称">
                    <el-input v-model="form.name" auto-complete="off" ></el-input>
                </el-form-item>

                <el-form-item label="所属公司">
                     <el-input v-model="form.companyName" placeholder="请选择所属公司"  @focus="openSelectCompanyDialog" :readOnly="true"></el-input>
                     <el-input v-model="form.companyId" type="hidden"></el-input>
                </el-form-item>
                <el-form-item label="身份证号码" >
                    <el-input v-model="form.idNo" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="手机号" >
                    <el-input v-model="form.mblNo" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="角色">
                    <el-input placeholder="请为用户分配角色"  @focus="openSelectRoleDialog" :readOnly="true"></el-input>
                    <el-input v-model="form.roleIds" type="hidden"></el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="$emit('cancel');">关 闭</el-button>
                <el-button type="primary" :loading="btnLoading" @click="btnOk">确 定</el-button>
            </div>
        </el-dialog>

        <SelectCompanyDialog
                 :title="selectCompanyTitle"
                 :dialogFormVisible="selectDialogCompanyVisible"
                 :data="companyTree"
                 @val-change="selectCompany"
                 @cancel="selectDialogCompanyVisible = false"
             >
         </SelectCompanyDialog>

         <SelectRoleDialog
                 :title="selectRoleTitle"
                 :dialogFormVisible="selectDialogRoleVisible"
                 :data="roleList"
                 @val-change="selectRole"
                 @cancel="selectDialogRoleVisible = false"
             >
         </SelectRoleDialog>

    </div>
</template>

<script>
    import SelectCompanyDialog from './SelectCompanyDialog.vue'
    import SelectRoleDialog from './SelectRoleDialog.vue'
    export default {
        name: 'addUser',
        props: {
            dialogFormVisible:Boolean,
            //data: [Object,Boolean],
            title:String
        },

        data() {
              return {
                selectDialogVisible : false,
                btnLoading:false,
                form: {
                  name:null,
                  companyId:null,
                  mblNo:'',
                  roleIds:'',
                },
                selectCompanyTitle:'请选择公司',
                companyTree :[],
                selectDialogCompanyVisible:false,
                selectRoleTitle: '请选择角色',
                roleList : [],
                selectDialogRoleVisible:false,
              }

        },
        watch: {
            'data': {
                handler: function () {
                    if(this.data){
                        for (let k in this.form){
                          this.form[k] = this.data[k];
                        }
                    }else {
                      for (let k in this.form){
                        this.form[k] = '';
                      }
                    }
                },
                deep: true
            }
        },
        methods: {
          handleChange(){},
          btnOk(){
              let errorMsg = false;
              let formData = this.form;

              this.$emit('val-change',this.form);
              this.btnLoading = true;
              setTimeout(()=>{this.btnLoading = false},1000)
          },
          openSelectCompanyDialog(){
             this.selectDialogCompanyVisible=true;
             var req={}
             req.status=1;
             this.$APIS.default.treeCompany(req)
                  .then(res => {
                       this.companyTree= res.data.body.menuTree
             });
          },
          openSelectRoleDialog(){

          },
          selectCompany(data){
             if(data.length!=1){
                this.$message.error("error:能且只能选择一个公司");
             }
             this.selectDialogCompanyVisible=false
             this.form.companyId=data[0].id;
             this.form.companyName=data[0].id+'-'+data[0].name;
          },
          selectRole(data){},
        },
        components: {
           SelectCompanyDialog,SelectRoleDialog
        }
    }
</script>
<style lang="less">
    .category-dialog{
        .el-cascader{
            width: 100%;
        }
    }
</style>
